<template>
  <div class="us-wrap" :class="{ 'lang-en': $i18n.locale === 'en' }">
    <div class="none-box" v-if="!usData">{{ $t('暂无数据') }}</div>
    <template v-else>
      <p class="head">“</p>
      <pre v-html="usData"></pre>
    </template>
    <p class="bottom-bg1"></p>
    <p class="bottom-bg2"></p>
    <p class="bottom-bg3"></p>
  </div>
</template>
<script>
import api from '@/api/us.js'
export default {
  data() {
    return {
      usData: '',
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      const lang = localStorage.getItem("i18nLocale");
      let res = await this.$http.get(api.getData, {
        params: {
          category: 'homepage',
        },
      })
      if (res && res.code == 0) {
        // 查找key为'homepage.aboutus'的项
        const key = lang === 'en' ? 'homepage.aboutus.en' : 'homepage.aboutus'
        const targetItem = res.data.find(item => item.key === key);
        this.usData = targetItem ? targetItem.value : ''; // 或者根据需求设置默认值
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.us-wrap {
  width: 64.39rem;
  background: #f5f7fa;
  border-radius: 0.57rem;
  margin: 3.72rem auto 5.56rem 7.78rem;
  padding: 1.33rem;
  position: relative;

  pre {
    width: 100%;
    white-space: wrap;
    
  }
}

.lang-en {
  &.us-wrap {
    background: linear-gradient(to bottom, RGBA(153, 207, 255, 1) 0%, #fff 50%, #fff 100%);
    border-radius: 0.57rem 0.57rem 0.57rem 0.57rem;
    padding: 5rem 5rem 5rem 5rem;
    background: url('@/assets/img/my-bg.png') no-repeat center center;
    background-size: 100% 100%;
    color: #fff;
  }


  .head {
    position: absolute;
    left: 2.33rem;
    font-size: 5.43rem;
    top: -2.67rem;
    font-size: 12.43rem;
    background: linear-gradient(85deg,
        #fff 0%,
        #0085ff 50%,
        #0085ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
</style>
<style lang="scss">
.lang-en {
  pre {
    font-family: Arial-Regular;

    p {
      text-indent: 2rem;
    }

    h1 {
      font-weight: bold;
      font-size: 2.93rem;
      color: #fff;
    }

    h2 {
      font-weight: bold;
      font-size: 1.93rem;
      color: #fff;
    }
  }
  // .bottom-bg1 {
  //   height: 4rem;
  //   width: 100%;
  //   border-radius: 0.57rem;
  //   background-color: #fff;
  //   left: 50%;
  //   transform: translateX(-50%);
  //   position: absolute;
  //   bottom: -1rem;
  //   box-shadow: 0px 5px 5px rgba($color: #000000, $alpha: 0.2);
  //   z-index: 3;
  // }
  // .bottom-bg2 {
  //   height: 3rem;
  //   width: 98%;
  //   border-radius: 0.57rem;
  //   background-color: #fff;
  //   left: 50%;
  //   transform: translateX(-50%);
  //   position: absolute;
  //   bottom: -1.7rem;
  //   box-shadow: 0px 5px 5px rgba($color: #000000, $alpha: 0.2);
  //   z-index: 2;
  // }
  // .bottom-bg3 {
  //   height: 3rem;
  //   width: 96%;
  //   border-radius: 0.57rem;
  //   background-color: #fff;
  //   left: 50%;
  //   transform: translateX(-50%);
  //   position: absolute;
  //   bottom: -2.4rem;
  //   box-shadow: 0px 5px 5px rgba($color: #000000, $alpha: 0.2);
  //   z-index: 1;
  // }



}
</style>
